<template>
  <div class="app-container">
    <div style="padding: 10px 0;">
      <MerchantRankFormFilter
        @on-filter="submitFilterForm"
      />
    </div>
    <!--<div class="button-group">
      <el-button
        type="primary"
      >
        商户充值成功率统计
      </el-button>
    </div>-->
    <el-table
      border
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center"
    >
      <el-table-column label="三方平台" prop="channelName" width="180" align="center">
      </el-table-column>
      <el-table-column label="商户号" prop="merchantCode" align="center" show-tooltip-when-overflow>
      </el-table-column>
      <el-table-column label="今日剩余收款额度" prop="leftAmount" align="center">
        <template slot-scope="{row}">
          {{row.leftAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="成功率" prop="successRate" align="center">
        <template slot-scope="{row}">
          <span v-if="row.successRate">{{(row.successRate / 100) | currency}} %</span>
          <span v-else>0.00 %</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>

// constants
import { constType } from '@/const/payEnum';
import { paySetType } from '@/router/payRoutes';

// components
import MerchantRankFormFilter from './merchantRankFormFilter';

// services
import {
  getMerchantRateList,
} from '@/services/api/payment';

// mixins
import { grid, constsLabel, dialog } from '@/build';

const dialogType = {
};

export default {
  name: 'merchant-rank',
  components: {
    MerchantRankFormFilter,
  },
  mixins: [grid, constsLabel, dialog],
  data() {
    return {
      paySetType,
      filters: {
        page: 1,
        size: 20,
        channelId: -1,
      },
      tableData: {},
      tableSelectionList: [],
      dialogType,
      constType,
    };
  },
  computed: {
  },
  methods: {
  },
  mounted() {
    this.bindGet(getMerchantRateList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style lang="scss">

</style>
